<template>
  <div class="search-table-container">
    <div class="search-header">
      <el-input
        v-model="searchQuery"
        placeholder="请输入搜索内容"
        class="search-input"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      class="dark-table"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column
        prop="district"
        label="区县"
        width="120"
      />
      <el-table-column
        prop="pipelineScale"
        label="管线规模"
        width="120"
      />
      <el-table-column
        prop="overagePipelineScale"
        label="超龄管线规模"
        width="150"
      />
      <el-table-column
        prop="overageRate"
        label="超期率"
        width="120"
      />
      <el-table-column
        prop="disposalSuggestion"
        label="处置建议"
      />
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 模拟数据
const tableData = ref([
  {
    district: '渝北区',
    pipelineScale: '12809',
    overagePipelineScale: '18976',
    overageRate: '50%',
    disposalSuggestion: '立即进行更新改造'
  },
  {
    district: '渝中区',
    pipelineScale: '12809',
    overagePipelineScale: '18976',
    overageRate: '50%',
    disposalSuggestion: '立即进行更新改造'
  }
])

const handleSearch = () => {
  // 实现搜索逻辑
  console.log('搜索:', searchQuery.value)
}

const handleReset = () => {
  searchQuery.value = ''
  // 重置其他相关状态
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.search-table-container {
  padding: 20px;
  background-color: rgba(0, 21, 41, 0.7);
  border-radius: 4px;
}

.search-header {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-input {
  width: 200px;
}

.dark-table {
  background-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-border-color: #1890ff;
  --el-table-header-bg-color: rgba(24, 144, 255, 0.1);
  --el-table-header-text-color: #fff;
  --el-table-text-color: #fff;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #1890ff;
}
</style>